<template>
	<view>
		<view>
			<view class="wrap">
				<view class="u-tabs-box flexad"><u-tabs :list="tab" :current="current" @change="changetab2" active-color="#dc1d32" gutter="60"></u-tabs></view>
			</view>

			<view class="dingdanbox">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :top="100">
					<!-- 已上架 -->
					<view class="page-box" v-show="current === 0">
						<view class="order" v-for="(item, index) in onSale" :key="item.id" @click="xiangqing(item.id)">
							<view class="item flexstst">
								<view class="left"><image :src="item.product_img" mode="aspectFill" class="picture"></image></view>
								<view class="right flexcobe">
									<text class="b">{{ item.product_name }}{{ item.alias_name }}</text>
									<text class="fs24 c9">{{ item.colliery_name ? item.colliery_name : '' }}</text>
									<text class="fs24 c9">热值：{{ item.zb_qnet_ar }}kCal 硫分：{{ item.zb_st_d }}%</text>
									<view class="flexbe w100">
										<view class="flexst pricebox">
											<text class="price b">￥{{ item.a_fare }}</text>
											<text class="fs24 c9">/吨</text>
										</view>
										<view class="flexst">
											<u-button type="error" plain size="mini" class="mlr20" @click="editPrice(item.id, item.a_fare)">修改价格</u-button>
											<u-button type="error" size="mini" @click="operate(item.id, 0)">下架</u-button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 已下架 -->
					<view class="page-box" v-show="current === 1">
						<view class="order" v-for="(item, index) in offSale" :key="item.id" @click="xiangqing(item.id)">
							<view class="item flexstst">
								<view class="left"><image :src="item.product_img" mode="aspectFill" class="picture"></image></view>
								<view class="right flexcobe">
									<text class="b">{{ item.product_name }}{{ item.alias_name }}</text>
									<text class="fs24 c9">{{ item.colliery_name }}</text>
									<text class="fs24 c9">热值：{{ item.zb_qnet_ar }}kCal 硫分：{{ item.zb_st_d }}%</text>
									<view class="flexbe w100">
										<view class="flexst pricebox">
											<text class="price b">￥{{ item.a_fare }}</text>
											<text class="fs24 c9">/吨</text>
										</view>
										<view class="flexst">
											<u-button type="error" plain size="mini" class="mlr20" @click="editPrice(item.id, item.a_fare)">修改价格</u-button>
											<u-button type="error" size="mini" @click="operate(item.id, 1)">上架</u-button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
				<u-modal v-model="show" ref="uModal" :async-close="true" :content="`确定要${toast}该商品吗？`" :show-cancel-button="true" @confirm="confirm"></u-modal>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { goods } from '../../../api/goods';
import { Ioperation, Ilist } from '../../../api/vo/goods';


export default {
	mixins: [MescrollMixin],
	data() {
		return {
			onSale: [],
			offSale: [],
			tab: [
				{
					name: '已上架'
				},
				{
					name: '已下架'
				}
			],
			current: 0,
			show: false,
			selectedId: '',
			selectedStatus: -1,
			toast: '',
			
		};
	},
	methods: {
		xiangqing(id: string) {
			uni.navigateTo({
				url: '../shangpinxiangxi/shangpinxiangxi?id=' + id
			});
		},
		editPrice(id: string, tag_price: string) {
			uni.navigateTo({
				url: '../change-price/change-price?id=' + id + '&price=' + tag_price
			});
		},
		operate(id: string, status: number) {
			this.show = true;
			this.selectedId = id;
			this.selectedStatus = status;
			if (status === 1) {
				this.toast = '上架';
			} else {
				this.toast = '下架';
			}
		},
		async confirm() {
			let operate: Ioperation = {
				id: this.selectedId,
				status: this.selectedStatus
			};
			const OP = await goods.operation(operate);

			uni.showToast({
				title: this.toast + '成功'
			});
			this.show = false;
			this.mescroll.resetUpScroll();
		},
		changetab2(index) {
			//订单tab切换
			this.current = index;
			this.mescroll.resetUpScroll();
		},
		upCallback(page) {
			this.mescroll.optUp.textNoMore = '-- 我也是有底线的 --';
			this.current?this.getOffSale(page):this.getOnSale(page);
		},

		async getOnSale({num,size}) {
			//已上架
			let commodity = new Ilist();
			commodity.page = num;
			commodity.size = size;
			commodity.param.status = 1;
			const res: any = await goods.list(commodity).catch(() => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr();
				});
			//设置列表数据
			if (num == 1) this.onSale = []; //如果是第一页需手动置空列表
			this.onSale = this.onSale.concat(res.results); //追加新数据
			// 后台接口有返回列表的总数据量 res.count
			this.mescroll.endBySize(res.results.length, res.count);
		},
		async getOffSale({num,size}) {
			//已下架
			let commodity = new Ilist();
			commodity.page = num;
			commodity.size = size;
			commodity.param.status = 0;
			const res: any = await goods.list(commodity).catch(() => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr();
				});
			//设置列表数据
			if (num == 1) this.offSale = []; //如果是第一页需手动置空列表
			this.offSale = this.offSale.concat(res.results); //追加新数据
			// 后台接口有返回列表的总数据量 res.count
			this.mescroll.endBySize(res.results.length, res.count);
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #f8fafb;
}

.zanwu {
	text-align: center;
	font-size: 28rpx;
	color: #999999;
	line-height: 90rpx;
}

.u-tabs-box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 90rpx;
	z-index: 9999;
	background: #ffffff;
}

.tabact {
	background: #ff0000;
	border-radius: 50rpx;
	line-height: 65rpx;
	height: 65rpx;
	width: 180rpx;
	text-align: center;
	color: #ffffff;
}

.picture {
	width: 180rpx;
	height: 180rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.order {
	.right {
		height: 190rpx;
	}

	.item {
		padding: 20rpx;
		border-bottom: 1rpx solid #dddddd;
	}
}

.price {
	font-size: 36rpx;
	color: #dc1d32;
	margin-right: 8rpx;
}

.ml40 {
	margin-left: 40rpx;
}

.mlr20 {
	margin: 0 20rpx;
}

.pricebox {
	width: 250rpx;
}

.modal {
	width: 70vw;
	height: 21vh;
	padding: 3vh 0;
}

.btn {
	width: 200rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 50rpx;
	margin-top: 2vh;
}

.cancel {
	border: 1rpx solid #fa3534;
	color: #fa3534;
}

.comfirm {
	background: #fa3534;
	color: #ffffff;
}
</style>
